<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
</head>
<body>
<div id="app">
    <span>{{name}}</span><br>
    <!--v-model 双向数据绑定-->
    <input type="text" v-model="name">
    <input type="button" @click="change" value="修改"><br>
    <span>textarea--{{content}}</span>
    <textarea v-model="content"></textarea>

    <br><span>性别--{{genderValue}}</span>
    <input type="radio" value="1" name="gender" v-model="genderValue">男
    <input type="radio" value="2" name="gender" v-model="genderValue">女

    <br><span>请选择你喜欢的电影--{{movies}}</span>
    <input type="checkbox" value="1" v-model="movies">华尔街之狼
    <input type="checkbox" value="2" v-model="movies">猫鼠游戏
    <input type="checkbox" value="3" v-model="movies">大空头

    <!--<br><span>请选择你喜欢的电影&#45;&#45;{{selectMovies}}</span>-->
    <!--<select v-model="selectMovies">-->
        <!--<option value="" disabled>请选择</option>-->
        <!--<option value="华尔街之狼">华尔街</option>-->
        <!--<option value="大空头">大头</option>-->
        <!--<option value="飞驰人生">飞驰</option>-->
    <!--</select>-->

    <br><span>请选择你喜欢的电影--{{selectMutipleMovies}}</span>
    <select v-model="selectMutipleMovies" multiple size="4">
        <option value="" disabled>请选择</option>
        <option value="华尔街之狼">华尔街</option>
        <option value="大空头">大头</option>
        <option value="飞驰人生">飞驰</option>
    </select>

    <br><span>请选择你喜欢的电影--{{selectMovies}}</span>
    <select v-model="selectMovies">
        <option disabled value=""></option>
        <option v-for="option in option" :value="option.id">{{option.name}}</option>
    </select>

    <br><span>{{age|changeAge}}</span>
</div>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'dsx',
            content:'乔丹贝尔福特',
            genderValue:'1',
            movies:[1],
            selectMovies:'',
            selectMutipleMovies:[],
            option:[{"name":"变形金刚","id":1}, {"name":"复仇者联盟","id":2}, {"name":"飞驰人生","id":3}],
            age:18

        },
        methods:{
            change:function(){
                this.name=''
            },
        filters:{
            changeAge:function(age){
                if (age==18){
                    return '年轻'
                }

    }
        }

        }
    })
</script>

</body>
</html>